/* eslint-disable vue/no-dupe-keys */
<template>
  <div class="goods-container">

    <bread first="商品管理"
           second="商品列表"></bread>

    <!-- 卡片 -->
    <el-card class="box-card">
      <!-- 表格 -->
      <el-table border
                :stripe="true"
                :data="tabeData"
                style="width: 100%">
        <el-table-column type="index"
                         label="#"
                         width="52">
        </el-table-column>
        <el-table-column prop="authName"
                         label="权限名称"
                         width="457">
        </el-table-column>

        <el-table-column prop="path"
                         label="路径"
                         width="457">
        </el-table-column>

        <el-table-column prop="level"
                         label="等级"
                         width="457">
          <template slot-scope="scope">
            <el-tag :type="types"
                    disable-transitions>{{scope.row.level}}</el-tag>
          </template>
        </el-table-column>

      </el-table>
      <!-- 表格 -->

    </el-card>
     
  </div>
</template>
           
<script>
import { rightsApi } from '@/api'


export default {
  name: '',
  data () {
    return {
      //分页
      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 4,

      tabeData: [],
      paramsObj: {
        type: 'list'
      },
    }
  },

  created () {
    this.getUsers()
  },
  methods: {
    async getUsers () {
      console.log(this.types,456666);
      const res = await rightsApi(this.paramsObj.type)
      console.log(res, 999);
      this.tabeData = res.data.data
      // console.log(this.tabeData);



      //将 后台给的数字 修改成  文字
      //0,1,2 换成 一级 二级 三级
      this.tabeData.map(function (val) {
        if (val.level == 0) {
          val.level = '一级'
        } else if (val.level == 1) {
          val.level = '二级'
        } else if (val.level == 2) {
          val.level = '三级'
        } else {
          return
        }
      })
    },
  },
  computed: {
    // eslint-disable-next-line vue/return-in-computed-property
    types () {
			
      return 'success'

    }
  }

}
</script>
<style lang='less'  scoped>
.goods-container {
  .box-card {
    .searchBox {
      margin: 15px 0 20px;
      display: flex;
      .el-input {
        width: 400px;
        margin-right: 20px;
      }
    }

    .el-pagination {
      text-align: left;
    }
  }
}
</style>
